<template>
  <div>
       <el-card shadow="always">
     
   
    <el-row type="flex"  justify="center">
      <div class="logo">
        <img :src="require('@/assets/logo.png')" alt="" />
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane label="首页" name="first"></el-tab-pane>
        <el-tab-pane label="房产经纪" name="second"></el-tab-pane>
        <el-tab-pane label="地产分类" name="third"></el-tab-pane>
        <el-tab-pane label="关于我们" name="fourth"></el-tab-pane>
      </el-tabs>
    </el-row>
     </el-card>
  </div>
</template>
<script>
export default {
  data() {  
    return {
      activeName: "second",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
.logo {
    position: absolute;
    left: 0;
    top: -14px;
  height: 88px;
  width:88px;
  img {
    width: 100%;
    height: 100%;
  }
}
.headerdemo {
  height: 150px;
  background-color: red;
}
/deep/ .el-tabs__nav-wrap::after {
  background-color: #fff;
}
/deep/ .is-active {
  background-color: #409eff;
  color: #fff;
}
/deep/.el-tabs__item {
    height: 60px;
    line-height: 60px;
    font-size: 24px;
  text-align: center;
}
/deep/ .el-tabs__item.is-top:last-child {
  padding-right: 20px;
}
/deep/ .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
/deep/.el-card__body{
padding: 0;
}
</style>